<template>
  <div class="loginContent">
    <input type="text" placeholder="请输入学号" v-model="studentID" />
    <div>
      <input :type="pwdFlag ? 'password' : 'text'" placeholder="请输入密码" v-model="password" />
      <img class="eyes" :src="pwdFlag ? hiddenImg : showImg" alt="" @click="changesEyesImg" />
    </div>
    <div class="confirm">
      <button @click="submitLogin">确认</button>
    </div>
    <div class="buttonBox">
      <button class="checkedButton">登录</button>
      <router-link :to="{ path: '/register' }"><button>注册</button></router-link>
    </div>
    <div class="textBox">
      <span></span>
      <span>忘记密码？</span>
    </div>
    <div class="restWays">
      <div class="restWay" v-for="restWay in restWays" :key="restWay">
        <img :src="restWay.iconUrl" alt="" />
        <div>{{ restWay.way }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {isQQNum,isStudentId,isPassword} from '../../utils/check'
import {loginIconWay} from '../../data/loginAndRegistered'
 /** 登录组件
   * @vue-data {Number} studentID - 学生id
   * @vue-data {String} password - 密码
   */
export default {
  name: 'Login',
  data() {
    return {
      studentID: '',
      password: '',
      pwdFlag: true,
      hiddenImg: require('@/assets/img/login&&register/hidden2.png'),
      showImg: require('@/assets/img/login&&register/show.png'),
      restWays: loginIconWay,
    };
  },
  methods: {
    //消息弹出框
    message(message, type) {
      this.$message({
        message: message,
        showClose: true,
        type: type,
        center: true,
      });
    },

    //密码框的显示隐藏
    changesEyesImg() {
      this.pwdFlag = !this.pwdFlag;
    },
    //提交登录
    submitLogin() {
      //学号
      let studentID = this.studentID;
      //小组
      let password = this.password;
      //非空判断
      if (studentID === '') {
        this.message('请输入学号', 'warning');
        return;
      }
      if (password === '') {
        this.message('请输入密码！', 'warning');
        return;
      }
      //格式验证
      //1.学号 10位
      const regStudentID = /^[0-9]{10}$/;
      if (!isStudentId(studentID)) {
        this.message('注意学号数字十位！', 'warning');
        return;
      }
      //2.密码 6-16位
      if (!isPassword(password)) {
        this.message('注意密码6-16位字母或数字!', 'warning');
        return;
      }
      //发送登录信息
      this.$api.loginAndRegisterApi.login({ stu_id: studentID, password: password }).then((res) => {
        console.log(res);
        switch (res.status) {
          //200登录成功
          case 200:
            this.message(res.msg, 'success');
            localStorage.setItem('localID', res.data.info.id);
            localStorage.setItem('token', res.data.token);
            this.$store.commit('moudlesUserInfo/newInfo', res?.data?.info);
            //管理员
            if (res.data.info.is_root||res.data.info.is_senior) {
              this.$router.push({ path: '/admin' });
            } else {
              //普通用户
              this.$router.push({ path: '/' });
            }
            break;
          //303账号密码错误
          case 303:
            this.message(res.msg, 'error');
            break;
          //403学号未注册
          case 403:
            this.message(res.msg, 'warning');
            break;
          default:
            this.message(res.msg, 'error');
            break;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.loginContent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  width: 30vw;
  height: 43.4vh;
  margin: 0 auto;
  top: 3.5vh;
  background-color: rgba(#fff #fff, #fff, 0);
  // background-color: rgb(227, 135, 135);
}

input {
  width: 22vw;
  height: 5vh;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  color: #fff;
  padding-left: 10px;
  font-size: 0.8vw;
}
input::-webkit-input-placeholder {
  color: #fff;
  letter-spacing: 0.1vw;
}
//清除默认小眼睛
input[type='password']::-ms-reveal {
  display: none;
}
//悬浮input边框加深
input:hover {
  border: 2.5px solid rgba(255, 255, 255, 1);
}
.eyes {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 5vw;
  top: 11vh;
  cursor: pointer;
}
.confirm {
  width: 22vw;
}
.buttonBox {
  display: flex;
  width: 22vw;
  justify-content: space-between;
}
button {
  width: 8vw;
  height: 4.5vh;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 1); //去掉边框阴影
  outline: none;
  border-width: 1px; /*边框透明*/
  cursor: pointer;
  font-size: 1.2vw;
  letter-spacing: 0.8vw;
  text-indent: 0.8vw; //解决letter-spacing整体偏左问题
  font-weight: 500;
}
button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.confirm button {
  width: 100%;
}
.textBox {
  width: 22vw;
  display: flex;
  justify-content: space-between;
}
.textBox span {
  font-size: 0.8vw;
  cursor: pointer;
}
.restWays {
  display: flex;
  width: 22vw;
  justify-content: space-evenly;
  font-size: 0.6vw;
  font-weight: 300;
}
.restWays img {
  //img水平居中的方法
  width: 1.5vw;
  height: 2.5vh;
  clear: both;
  display: block;
  margin: auto;
  margin-bottom: 0.6vh !important;
}
.restWays div {
  cursor: pointer;
}
.restWay:hover {
  transform: scale(1.2);
  transition: 0.5s linear;
}
.checkedButton {
  background-color: rgba(255, 255, 255, 0.3);
}
</style>
